<template>
  <div class="title-card" :class="{white: !!color}">
    <h2 class="title">{{title}}</h2>
    <h3 class="sub-title">{{en}}</h3>
  </div>
</template>

<script>
  export default {
    data() {
      return {}
    },
    props: {
      title: {
        type: String,
        default() {
          return '标题'
        }
      },
      en: {
        type: String,
        default() {
          return 'title'
        }
      },
      color: {
        type: String,
        default() {
          return ''
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.title-card {
  padding-top: rem(36);
  padding-bottom: rem(26);
  text-align: center;
  &.white {
    .title {
      color: #fff;
    }
    .sub-title {
      color: #fff;
      &::before,
      &::after {
        color: #fff;
      }
    }
  }
  .title {
    line-height: rem(58);
    font-size: rem(50);
    color: #333;
  }
  .sub-title {
    font-size: rem(20);
    color: #999;
    line-height: rem(23);
    &::before {
      content: '';
      position: relative;
      top: rem(-4.5);
      display: inline-block;
      margin-right: rem(10);
      width: rem(32);
      border-top: 1px solid #999;
    }
    &::after {
      content: '';
      position: relative;
      top: rem(-4.5);
      display: inline-block;
      margin-left: rem(10);
      width: rem(32);
      border-top: 1px solid #999;
    }
  }
}
</style>
